<template>
    <div class="leftlist">
        <div class="title">
            <i class="el-icon-s-check"></i>
            {{$t('m.subscription.title')}}
            <span
                class="right"
                :class="show?'el-icon-arrow-down':'el-icon-arrow-right'"
                @click="_show"
            ></span>
        </div>
        <ul v-show="show">
            <li
                v-for="item in personnelLists"
                @click="_userId(item)"
                :class="{on:item.userId == indexs}"
                :key="item.id"
            >
                {{item.userDisplayName?item.userDisplayName:item.userName}}
                <span
                    class="departmentName"
                >{{item.departmentName}}</span>
            </li>
        </ul>
    </div>
</template>
<script>
const ERR_OK = 200;
import { getDepartmentUser } from "@/api/system/subscription";
export default {
    data() {
        return {
            show: true,
            indexs: null,
            personnelLists: []
        };
    },
    created() {
        this.personnelList();
    },
    methods: {
        _userId(item) {
            this.indexs = item.userId;
            this.$emit("userId", item);
        },
        personnelList() {
            // 人员列表
            getDepartmentUser(this.$store.getters.userId + "/" + "1").then(
                res => {
                    this.personnelLists = res.data.data;
                    this._userId(this.personnelLists[0]);
                }
            );
        },
        _show() {
            this.show = this.show ? false : true;
        },
        personnenull() {
            this.indexs = "";
        }
    }
};
</script>

<style lang="less" scoped>
.leftlist {
    z-index: 9;

    ul {
        padding: 0;
        li {
            padding: 7px 10px;
            font-size: 14px;
            color: #333;
            border-bottom: 1px solid #ebeef5;
            font-style: none;

            &:last-child {
                border-bottom: none;
            }

            &:hover {
                background-color: #f5f7fa;
            }

            &.on {
                color: #ffffff;
                background-color: #409eff;

                .departmentName {
                    color: #ffffff;
                }
            }

            .departmentName {
                float: right;
                font-size: 12px;
                color: #999;
            }
        }
    }

    .title {
        font-size: 14px;
        padding: 7px 15px;
        border-bottom: 1px solid #ebeef5;
        background: #ebeef5;
    }

    .right {
        float: right;
        font-size: 18px;
        cursor: pointer;
    }
}
</style>
